<template>
    <div>
        <el-row :gutter="15">
            <el-form
                ref="elForm"
                :model="formData"
                size="medium"
                label-width="100px"
            >
                <!-- :rules="rules" -->

                <el-col :span="8">
                    <el-row :gutter="15">
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="票据类型"
                                prop="billType"
                            >
                                <el-input
                                    v-model="formData.billType"
                                    placeholder="请输入票据类型"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="收款日期"
                                prop="receiptDate"
                            >
                                <el-date-picker
                                    v-model="formData.receiptDate"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    :style="{ width: '100%' }"
                                    placeholder="请选择收款日期"
                                    clearable
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="收款银行"
                                prop="receiptBankId"
                            >
                                <el-input
                                    v-model="formData.receiptBankId"
                                    placeholder="请输入收款银行"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="票据号"
                                prop="billNo"
                            >
                                <el-input
                                    v-model="formData.billNo"
                                    placeholder="请输入票据号"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="收款银行账号"
                                prop="receiptBankAccount"
                            >
                                <el-input
                                    v-model="formData.receiptBankAccount"
                                    placeholder="请输入收款银行账号"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="收款账号名称"
                                prop="receiptBankName"
                            >
                                <el-input
                                    v-model="formData.receiptBankName"
                                    placeholder="请输入收款账号名称"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="8">
                    <el-row :gutter="15">
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="币别"
                                prop="kingBaseCurrencyId"
                            >
                                <el-input
                                    v-model="formData.kingBaseCurrencyId"
                                    placeholder="请输入币别"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="结算号"
                                prop="discountSettlementNumber"
                            >
                                <el-input
                                    v-model="formData.discountSettlementNumber"
                                    placeholder="请输入结算号"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="收款组织"
                                prop="receiptDeptId"
                            >
                                <el-input
                                    v-model="formData.receiptDeptId"
                                    placeholder="请输入收款组织"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="费用"
                                prop="receiptFee"
                            >
                                <el-input
                                    v-model="formData.receiptFee"
                                    placeholder="请输入费用"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="本位币"
                                prop="field101"
                            >
                                <el-input
                                    v-model="formData.field101"
                                    placeholder="请输入本位币"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="备注"
                                prop="remark"
                            >
                                <el-input
                                    v-model="formData.remark"
                                    placeholder="请输入备注"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="8">
                    <el-row :gutter="15">
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="汇率类型"
                                prop="rateType"
                            >
                                <el-input
                                    v-model="formData.rateType"
                                    placeholder="请输入汇率类型"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="汇率"
                                prop="rate"
                            >
                                <el-input
                                    v-model="formData.rate"
                                    placeholder="请输入汇率"
                                    clearable
                                    :style="{ width: '100%' }"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="票面金额"
                                prop="faceAmount"
                            >
                                <el-input
                                    v-model="formData.faceAmount"
                                    placeholder="请输入票面金额"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="到期收款金额"
                                prop="field113"
                            >
                                <el-input
                                    v-model="formData.field113"
                                    placeholder="请输入到期收款金额"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                label-width="100px"
                                label="利息"
                                prop="receiptInterest"
                            >
                                <el-input
                                    v-model="formData.receiptInterest"
                                    placeholder="请输入利息"
                                    clearable
                                    :style="{ width: '100%' }"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
            </el-form>
        </el-row>
    </div>
</template>
<script>
import { recepitInfo, getDetail } from "@/api/finance/receivebill";
export default {
    components: {},
    props: ["rowId"],
    data() {
        return {
            formData: {
                billType: undefined,
                receiptDate: null,
                receiptBankId: undefined,
                billNo: undefined,
                receiptBankAccount: undefined,
                receiptBankName: undefined,
                kingBaseCurrencyId: undefined,
                discountSettlementNumber: undefined,
                receiptDeptId: undefined,
                receiptFee: undefined,
                field101: undefined,
                remark: undefined,
                rateType: undefined,
                rate: undefined,
                faceAmount: undefined,
                field113: undefined,
                receiptInterest: undefined,
            },
            // rules: {
            //   billType: [{
            //     required: true,
            //     message: '请输入票据类型',
            //     trigger: 'blur'
            //   }],
            //   receiptDate: [{
            //     required: true,
            //     message: '请选择收款日期',
            //     trigger: 'change'
            //   }],
            //   receiptBankId: [{
            //     required: true,
            //     message: '请输入收款银行',
            //     trigger: 'blur'
            //   }],
            //   billNo: [{
            //     required: true,
            //     message: '请输入票据号',
            //     trigger: 'blur'
            //   }],
            //   receiptBankAccount: [{
            //     required: true,
            //     message: '请输入收款银行账号',
            //     trigger: 'blur'
            //   }],
            //   receiptBankName: [{
            //     required: true,
            //     message: '请输入收款账号名称',
            //     trigger: 'blur'
            //   }],
            //   kingBaseCurrencyId: [{
            //     required: true,
            //     message: '请输入币别',
            //     trigger: 'blur'
            //   }],
            //   discountSettlementNumber: [{
            //     required: true,
            //     message: '请输入结算号',
            //     trigger: 'blur'
            //   }],
            //   receiptDeptId: [{
            //     required: true,
            //     message: '请输入收款组织',
            //     trigger: 'blur'
            //   }],
            //   receiptFee: [{
            //     required: true,
            //     message: '请输入费用',
            //     trigger: 'blur'
            //   }],
            //   field101: [{
            //     required: true,
            //     message: '请输入本位币',
            //     trigger: 'blur'
            //   }],
            //   remark: [{
            //     required: true,
            //     message: '请输入备注',
            //     trigger: 'blur'
            //   }],
            //   rateType: [{
            //     required: true,
            //     message: '请输入汇率类型',
            //     trigger: 'blur'
            //   }],
            //   rate: [{
            //     required: true,
            //     message: '请输入汇率',
            //     trigger: 'blur'
            //   }],
            //   faceAmount: [{
            //     required: true,
            //     message: '请输入票面金额',
            //     trigger: 'blur'
            //   }],
            //   field113: [{
            //     required: true,
            //     message: '请输入到期收款金额',
            //     trigger: 'blur'
            //   }],
            //   receiptInterest: [{
            //     required: true,
            //     message: '请输入利息',
            //     trigger: 'blur'
            //   }],
            // },
        };
    },
    computed: {},
    methods: {
        submit(cb) {
            this.$refs["elForm"].validate((valid) => {
                if (!valid) return;
                // TODO 提交表单
                recepitInfo(this.formData).then((res) => {
                    if (res.code === 200) {
                        this.$message({
                            message: "修改成功！",
                            type: "success",
                        });
                        cb();
                    }
                });
            });
        },
    },
    mounted() {
        if (this.rowId) {
            getDetail(this.rowId).then((res) => {
                if (res.code === 200) {
                    this.formData = {
                        ...this.formData,
                        ...res.data.kingFinanceReceiptBillEntity,
                    };
                }
            });
        }
    },
};
</script>
<style></style>
